<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发表文章</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <!-- TinyMCE 5.x 版本 -->
    <script src="https://cdn.tiny.cloud/1/你的API密钥/tinymce/5/tinymce.min.js"></script>
    <style>
      body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
        }
        .admin-header {
            background: #333;
            color: white;
            padding: 15px 20px;
            border-bottom: 1px solid #454d55;
            text-align: center;
            font-size: 24px;
        }
        .content-container {
            display: flex;
            padding: 20px;
            gap: 20px;
        }
        .sidebar {
            width: 200px;
            background: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .menu-item {
            display: block;
            padding: 10px;
            color: #337ab7;
            text-decoration: none;
        }
        .menu-item.active {
            color: #007bff;
            font-weight: bold;
        }
        .form-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #212529;
        }
        .tox-statusbar__branding {
            display: block !important;
        }
        footer {
            margin-top: auto;
            padding: 10px 0;
            background-color: #333;
            color: white;
            text-align: center;
        }
    </style>
    <script>
        tinymce.init({
            selector: '#content',
            height: 400,
            language: 'zh_CN',
            plugins: 'advlist lists link',
            toolbar: 'styleselect | bold italic | bullist numlist | link',
            style_formats: [
                {title: '标题 3', format: 'h3'}
            ],
            statusbar: true,
            branding: true
        });
    </script>
</head>
<body>
     <div class="admin-header">
        <h3>{{ nickname }}的博客管理面板</h3>
    </div>

    <div class="content-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <h5>菜单</h5>
            <a href="{{ url_for('admin.admin_articles') }}" class="menu-item">
                <i class="fas fa-list"></i> 博文管理
            </a>
            <a href="{{ url_for('admin.add_article') }}" class="menu-item active">
                <i class="fas fa-plus"></i> 发表博文
            </a>
            <a href="#" class="menu-item">
                <i class="fas fa-folder"></i> 分类管理
            </a>
            <a href="#" class="menu-item">
                <i class="fas fa-cog"></i> 个人设置
            </a>
        </div>

        <div class="main-content col-md-10">
            <div class="card border-0 shadow">
                <div class="card-body">
                    <h3 class="card-title mb-4">发表博文</h3>
                    
                    <form method="POST">
                        <div class="mb-4">
                            <label class="form-label">标题</label>
                            <input type="text" 
                                   class="form-control" 
                                   name="title" 
                                   value="Flask框架概述"
                                   required>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label class="form-label">分类</label>
                                <select class="form-select" name="category_id">
                                    <option value="1" selected>软件编程</option>
                                    {% for category in categories %}
                                    <option value="{{ category.id }}">{{ category.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">内容</label>
                            <textarea id="content" name="content">


                        <h3>特点</h3>
                            </textarea>
                        </div>

                        <div class="d-flex gap-3">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 保存
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <footer class="mt-5 py-3">
        <div class="container">
            <div class="text-center text-muted">
                <p style="color: white;">&copy; 2024 Blog Admin. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
</body>
</html>